<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>作业管理系统</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <!-- 滚动条插件 -->
    <link rel="stylesheet" type="text/css" href="../../css/jquery.mCustomScrollbar.css">
    <script src="../../framework/jquery-ui-1.10.4.min.js"></script>
    <script src="../../framework/jquery.mousewheel.min.js"></script>
    <script src="../../framework/jquery.mCustomScrollbar.min.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->
    <script type="text/javascript" src="../../framework/frameAll.js"></script>
</head>

<body>
<div class="cBody">
    <div class="console">
        <!-- form搜索框or添加框 -->
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入需要检索的信息"
                           autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn" lay-submit lay-filter="formDemo">检索</button>
            </div>
        </form>
        <!-- 表格 -->
        <table class="layui-hide" id="demo" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">查看</a> -->
            <a href="../admin/addstuagent_list.html" class="layui-btn">查看</a>
        </script>
        <!-- layUI 分页模块 -->
        <div id="pages"></div>
    </div>
</div>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var className = "";
        var tableIns = table.render({
            elem: '#demo',
            height: "full-200",
            method: "get",
            request: {
                pageName: 'pageNo',//页码的参数名称，默认：page
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            where: {
                action: "page",
                className: className,
            },
            url: '/ClassServlet.do',//数据接口
            page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: '班级编号', width: 300, sort: true, fixed: 'left'}
                , {field: 'name', title: '班级名称', width: 300}
                , {field: 'number', title: '学生人数', sort: true}
                , {title: '操作', width: 300, align: 'center', toolbar: '#barDemo', fixed: 'right'}
            ]]
        });
        form.on('submit(formDemo)', function (data) {
            className = data.field.name;
            tableRender();
            return false;
        });
        table.on('tool(test)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        });
    });
</script>
</body>

</html>
